<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">

	<title></title>
	<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
	<style type="text/css">
		body,html{background: #fafafa;margin: 0;}
		.con{width: 1200px;margin: 0 auto;}
		header{height: 90px;line-height: 90px;background: #403c3a;}
		.logo{width: 75px;height: 75px;border-radius: 8px;}
		.logo img{height: 100%;}
		.search{width: 500px;height: 50px;line-height: 50px;background: #ffffff;border-radius: 25px;position: absolute;right: 10px;top: 10px;opacity: 0.9;}
		#input_search{height: 48px;width: 350px;border: none;border-bottom-left-radius: 25px;border-top-left-radius: 25px;padding-left: 20px;outline: none;}
		#input_btn{width: 130px;height: 50px;border-radius:25px;border: none;background: #2facfe;color: #FFFFFF;position: absolute;bottom: 0;right: 0;}
		.nav{padding: 0;}
		.nav li{list-style: none;display: inline-block;margin: 0 20px;}
		.nav li a{color: #FFFFFF;text-decoration: none;}
		.attr{width: 500px;height: 40px;padding-left: 20px;}
		.chinese,.english{width: 100px;height: 40px;line-height: 40px;text-align: center;font-size: 20px;cursor: pointer;border: none;border-radius: 8px;background: #2facfe;color: #FFFFFF;margin: 25px 10px;}
		.banner{position: relative;width: 100%;height: 600px;}
		.text{width: 40%;height: 300px;position: absolute;left: 30%;top:150px;background: rgba(64,60,58,0.5);color: #FFFFFF;padding: 10px;}
		.text_div{border: 4px solid #FFFFFF;width: 100%;height: 100%;text-align: center;}
		.text_div div{font-size: 35px;font-weight: 600;margin: 40px auto;}
		.text_div div span{font-size: 50px;color: #2FACFE;}
		.text_div p{font-size: 25px;}

	</style>
</head>
<body>
<header class="clearfix">
	<div class="con">
		<div class="logo float-left">
			<img src="img/logo.jpg" data-i18n="alt[logo]" />
		</div>
		<div class="btn-group float-right">
			<button class="chinese">中文</button>
			<button class="english">English</button>
		</div>
		<ul class="nav float-right">
			<li><a href="#" data-i18n-html="nav.home"></a></li>
			<li><a href="#" data-i18n-html="nav.page1"></a></li>
			<li><a href="#" data-i18n="nav.page2"></a></li>
			<li><a href="#" data-i18n="nav.page3"></a></li>
			<li><a href="#" data-i18n="nav.page4"></a></li>
			<li><a href="#" data-i18n="nav.page5"></a></li>
		</ul>
	</div>
</header>
<div class="banner">

	<div class="search">
		<input type="text" name="input_search" id="input_search" data-i18n="[placeholder]nav.input" />
		<input data-i18n="[value]nav.button" type="button" value="" id="input_btn" />
	</div>
	<div class="text">
		<div class="text_div">
			<div data-i18n-html="website.title"></div>
			<p data-i18n-html="website.describe"></p>
		</div>
	</div>
</div>


<script src="js/jquery.min.js"></script>

<script src="js/i18next.js"></script>

<!--<script src="https://cdn.bootcss.com/Chart.js/2.7.3/Chart.js"></script>-->

<script src="js/jquery.backstretch.min.js"></script>
<script>
	$(function(){
		/*
         *存cookie(cookieName--字段名   cookieValue--字段值   cookieDates--有效时间)
         * */
		function saveCookie(cookieName,cookieValue,cookieDates){
			var d = new Date();
			d.setDate(d.getDate()+cookieDates);
			document.cookie = cookieName+"="+cookieValue+";expires="+d.toGMTString();
		}
		//取cookie
		function getCookie(cookieName){
			var cookieStr = unescape(document.cookie);
			var arr = cookieStr.split("; ");
			var cookieValue = "";
			for(var i=0;i<arr.length;i++){
				var temp = arr[i].split("=");
				if(temp[0]==cookieName){
					cookieValue = temp[1];
					break;
				}
			}
			return cookieValue;
		}
		function lang(language){
			$.i18n.init({
				lng: language, //指定语言
				resGetPath: 'http://lng.heanny.cn/'+language+'.json?fe',//语言文件的路径
				ns: {
					namespaces: ['translation', 'message'],
					defaultNs: 'translation' //默认使用的，不指定namespace时
				}
			}, function(err, t) {
				$('[data-i18n]').i18n(); // 通过选择器集体翻译
				$('[data-i18n-html]').each(function(){
					var date_name = $(this).attr("data-i18n-html");
					$(this).html($.t(date_name));
				});

				//					var temp = $.t("nav.home"); //通过t函数获得某个翻译的值
				$.t("message:app.child", {
					count: '1'
				}); //使用namespace，并将count替换成1，其值为1 child
				$.t("message:app.child_plural", {
					count: '2'
				}); //将count替换成2，其值为2 children
			});
		}
		var langType = getCookie("language")||"zh";
		lang(langType);
		$(".chinese").click(function(){
			lang("zh");
			saveCookie("language","zh",1);
			// location.reload()//刷新页面
		});
		$(".english").click(function(){
			lang("en");
			saveCookie("language","en",1);
			// location.reload()
		});


		$('.banner').backstretch([
			"img/b1.png",
			"img/b2.png",
			"img/b3.png",
			"img/b4.png",
		], {
			fade: 1000,
			duration: 2000
		});
	})

</script>
</body>
</html>
